async function func() {
  //获取首页
  const res = await axios({
    url: "/dashboard",
  });
  console.log(res);
  const { overview, year, salaryData, groupData, provinceData } = res.data;
  // console.log('overview:', overview)
  // ------------- 2.渲染顶部的数据 -------------
  // document.querySelector('[name=age]').innerHTML = overview.age
  // document.querySelector('[name=group_count]').innerHTML = overview.group_count
  // document.querySelector('[name=salary]').innerHTML = overview.salary
  // document.querySelector('[name=student_count]').innerHTML =
  //   overview.student_count

  //简写渲染顶部
  for (const key in overview) {
    //通过key来生成，选择器，获取dom元素
    //对象[key]，动态的获取指定值
    document.querySelector(`[name=${key}]`).innerHTML = overview[key];
  }

  function b(year) {
    const myChart = echarts.init(document.getElementById("line"));

    const months = year.map(v => v.month);
    console.log(months);
    const salarys = year.map(v => v.salary);
    console.log(salarys);
    // 指定图表的配置项和数据
    const option = {
      //标题
      title: {
        top: "5%",
        left: "center",
        text: "2021年全学科薪资走势",
      },
      //x轴的样式
      xAxis: {
        type: "category",
        //坐标轴两边留白策略
        boundaryGap: true,
        data: months,
        axisLine: {
          //线的样式
          lineStyle: {
            color: "gray",
            type: "dashed",
          },
        },
      },
      //显示框，设置了该属性值，就会显示提示款
      tooltip: {
        trigger: "axis",
      },
      yAxis: {
        type: "value",
        //分割线
        splitLine: {
          show: "true", //显示
          //线的样式
          lineStyle: {
            color: ["#d6d6d6"], //颜色
            type: "dashed", //虚线
          },
        },
      },
      //绘图网络
      grid: {
        bottom: 40,
        left: 60, //左侧的间隙
        right: 30,
      },
      //图形的颜色
      color: ["#608cff"],
      series: [
        {
          data: salarys,
          //平滑曲线
          smooth: true,
          //标记大小
          symbolSize: 10,
          type: "line",
          //线段的样式
          lineStyle: {
            width: 6, //粗细
          },
          grid: {
            top: "20%",
          },
          //区域的样式
          areaStyle: {
            //区域的颜色
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0, //开头
                  color: "#52a1fa", //0处的颜色
                },
                {
                  offset: 1, //结尾
                  color: "#ffff", //100%处的颜色
                },
              ],
              global: false, //缺省位flase
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  }
  b(year);

  function p(salaryData) {
    const myChart = echarts.init(document.querySelector("#salary"));
    console.log(salaryData);
    const labels = salaryData.map(n => n.label);
    console.log(labels);
    const g_counts = salaryData.map(n => n.g_count);
    console.log(g_counts);
    const b_counts = salaryData.map(n => n.b_count);
    console.log(b_counts);
    // 指定图表的配置项和数据
    const option = {
      title: {
        top: "5%",
        left: "center",
        text: "班级薪资分布",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        bottom: "5%",
        // top: '5%',
        left: "center",
      },
      color: ["#ffb227", "#58a6ff", "#3fceff", "#39e8a9"],
      series: [
        {
          name: "班级薪资分布",
          type: "pie",
          radius: ["57%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 50,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            // label: {
            //   show: true,
            //   fontSize: "40",
            //   fontWeight: "bold",
            // },
          },
          labelLine: {
            show: false,
          },
          // data: [
          //   { value: 7, name: "1万一下" },
          //   { value: 27, name: "1-1.5万" },
          //   { value: 24, name: "1.5-2万" },
          //   { value: 22, name: "2万以上" },
          //   // { value: 300, name: 'Video Ads' }
          // ],
          data: salaryData.map(v => {
            return {
              value: v.b_count + v.g_count,
              name: v.label,
            };
          }),
        },
      ],
    };
    myChart.setOption(option);
  }
  p(salaryData);

  // ------------- 班级每组薪资  -------------
  function groupSalary(groupData) {
    const myChart = echarts.init(document.querySelector("#lines"));

    // 指定图表的配置项和数据
    const option = {
      xAxis: {
        type: "category",
        // 轴线
        axisLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: "dashed",
            // 颜色
            color: "#bebebe",
          },
        },
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        // 默认渲染第一个的数据
        data: groupData[1].map(v => v.name),
      },
      // 提示框
      tooltip: {},
      // 颜色
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#65dcb2", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#d2f0e7", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#4a9fed", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#d6e7f6", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      ],
      // y轴
      yAxis: {
        type: "value",
        // 分割线
        splitLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: "dashed",
          },
        },
      },
      // 绘图网格
      grid: {
        left: 50,
        right: 40,
      },
      series: [
        // 多个图表
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          // 默认渲染第一个的期望薪资
          data: groupData[1].map(v => v.hope_salary),
          type: "bar",
        },
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          // 默认渲染第一个的 实际薪资
          data: groupData[1].map(v => v.salary),
          type: "bar",
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 点击按钮的高亮切换 forEach 定义在nodeList的原型上
    document.querySelectorAll("#btns button").forEach(item => {
      item.addEventListener("click", function () {
        // 移除其他的高亮
        document.querySelector(".btn-blue").classList.remove("btn-blue");
        // 高亮自己
        this.classList.add("btn-blue");

        // 获取到 对应的数据
        const index = this.innerHTML.trim();
        // console.log('index:', index)
        const data = groupData[index];
        // console.log('data:', data)
        // 更新option 底部的名字
        option.xAxis.data = data.map(v => v.name);
        // 更新option 期望薪资
        option.series[0].data = data.map(v => v.hope_salary);
        // 更新option 实际薪资
        option.series[1].data = data.map(v => v.salary);
        // 调用 setOption方法 传入修改完毕的 option
        myChart.setOption(option);
      });
    });

    // 测试 setOption是否会更新图表
    // setTimeout(() => {
    //   // 第一个图表的 data数据
    //   option.series[0].data = [220, 100, 350, 180, 20, 160, 200]
    //   myChart.setOption(option)
    // }, 5000)
  }
  groupSalary(groupData);

  // ------------- 男女薪资分布 -------------
  function h(salaryData) {
    const myChart = echarts.init(document.getElementById("gender"));

    // 指定图表的配置项和数据
    const option = {
      title: [
        {
          text: "男女薪资分布",
        },
        {
          text: "男生",
          left: "center",
          top: "48%",
          textStyle: {
            fontSize: "15",
          },
        },
        {
          text: "女生",
          left: "center",
          top: "88%",
          textStyle: {
            fontSize: "15",
          },
        },
      ],
      tooltip: {
        trigger: "item",
      },
      // 颜色
      color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
      series: [
        {
          name: "Access From",
          type: "pie",
          // 内外半径
          radius: ["20%", "30%"],
          // 位置
          center: ["50%", "30%"],
          data: salaryData.map(v => {
            return {
              value: v.b_count,
              name: v.label,
            };
          }),
          // [
          //   { value: 1048, name: "Search Engine" },
          //   { value: 735, name: "Direct" },
          //   { value: 580, name: "Email" },
          //   { value: 484, name: "Union Ads" },
          //   { value: 300, name: "Video Ads" },
          // ]
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["20%", "30%"],
          center: ["50%", "70%"],
          data: salaryData.map(v => {
            return {
              value: v.g_count,
              name: v.label,
            };
          }),
          //  [
          //   { value: 1048, name: "Search Engine" },
          //   { value: 735, name: "Direct" },
          //   { value: 580, name: "Email" },
          //   { value: 484, name: "Union Ads" },
          //   { value: 300, name: "Video Ads" },
          // ]
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  h(salaryData);

  // ------------- 地域分布 -------------
  function initMapChart(provinceData) {
    // 基于dom元素 初始化ECharts
    const myEchart = echarts.init(document.querySelector("#map"));

    // 地域数据
    // 基于服务器的数据 筛选出要的
    // 赋值给对应的项 find includes
    const dataList = [
      { name: "南海诸岛", value: 0 },
      { name: "北京", value: 0 },
      { name: "天津", value: 0 },
      { name: "上海", value: 0 },
      { name: "重庆", value: 0 },
      { name: "河北", value: 0 },
      { name: "河南", value: 0 },
      { name: "云南", value: 0 },
      { name: "辽宁", value: 0 },
      { name: "黑龙江", value: 0 },
      { name: "湖南", value: 0 },
      { name: "安徽", value: 0 },
      { name: "山东", value: 0 },
      { name: "新疆", value: 0 },
      { name: "江苏", value: 0 },
      { name: "浙江", value: 0 },
      { name: "江西", value: 0 },
      { name: "湖北", value: 0 },
      { name: "广西", value: 0 },
      { name: "甘肃", value: 0 },
      { name: "山西", value: 0 },
      { name: "内蒙古", value: 0 },
      { name: "陕西", value: 0 },
      { name: "吉林", value: 0 },
      { name: "福建", value: 0 },
      { name: "贵州", value: 0 },
      { name: "广东", value: 0 },
      { name: "青海", value: 0 },
      { name: "西藏", value: 0 },
      { name: "四川", value: 0 },
      { name: "宁夏", value: 0 },
      { name: "海南", value: 0 },
      { name: "台湾", value: 0 },
      { name: "香港", value: 0 },
      { name: "澳门", value: 0 },
    ];
    // 循环 及查找
    dataList.forEach(v => {
      const res = provinceData.find(pv => {
        // 找到 名字开头部分相同的元素
        if (pv.name.includes(v.name)) {
          return true;
        } else {
          return false;
        }
      });
      // 检索之后的结果
      // console.log("res:", res);
      // 找到了对应的那个元素
      if (res !== undefined) {
        v.value = res.value;
      }
    });
    console.log("dataList:", dataList);

    let option = {
      title: {
        text: "籍贯分布",
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} 位学员",
        borderColor: "transparent",
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: "#fff",
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: "left",
        bottom: "20",
        text: ["6", "0"],
        inRange: {
          color: ["#ffffff", "#0075F0"],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: "china",
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: "10",
            color: "rgba(0,0,0,0.7)",
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(0, 0, 0, 0.2)",
            color: "#e0ffff",
          },
          emphasis: {
            areaColor: "#34D39A",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      series: [
        {
          name: "籍贯分布",
          type: "map",
          geoIndex: 0,
          data: dataList,
        },
      ],
    };

    // 基于选项 生成图表
    myEchart.setOption(option);
  }

  initMapChart(provinceData);
}
//调用一次
func();
